<template>
  <div class="map-view">
    <div ref="mapView" class="main-map"/>
    <i class="el-icon-close map-close" @click="hiddenView"/>
  </div>
</template>

<!--todo 这里有$el的问题-->
<script setup>
/**
 * 在WKFileldView中用于显示地图
 */
import {getMaxIndex, getBaiduMap} from '/src/utils/index.js'
import {defineOptions, getCurrentInstance, onMounted, onUnmounted} from "vue";

// 引入消息总线
const cxt = getCurrentInstance()
const bus = cxt.appContext.config.globalProperties.$bus


defineOptions({
  name: 'MapView', // 地图详情

})

const props = defineProps({
  /**
   * title 内容
   * lat lng 经纬度
   */
  title: {
    type: String,
    default: ''
  },
  lat: {
    type: [String, Number],
    default: 0
  },
  lng: {
    type: [String, Number],
    default: 0
  }
})

const emits = defineEmits('hidden')


onMounted(() => {
  this.$el.style.zIndex = getMaxIndex()
  document.body.appendChild(this.$el)

  getBaiduMap()
      .then(() => {
        let map = new BMap.Map(this.$refs.mapView, {enableMapClick: false})
        let point = new BMap.Point(parseFloat(props.lng), parseFloat(props.lat))
        map.centerAndZoom(point, 18)
        map.enableScrollWheelZoom()

        let marker = new BMap.Marker(point) // 创建标注
        map.addOverlay(marker) // 将标注添加到地图中
        let infoWindow = new BMap.InfoWindow(props.title) // 创建信息窗口对象
        marker.addEventListener('click', function () {
          map.openInfoWindow(infoWindow, point) // 开启信息窗口
        })
      })
})


function hiddenView() {
  emits('hidden')
}

onUnmounted(() => {
  // remove DOM node after destroy
  if (this.$el && this.$el.parentNode) {
    this.$el.parentNode.removeChild(this.$el)
  }
})

</script>
<style lang="scss" scoped>
.map-view {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #000;

  .main-map {
    position: absolute;
    left: 100px;
    top: 100px;
    bottom: 100px;
    right: 100px;
    overflow: hidden;
  }
}

.map-close {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}
</style>
